<template>
  <div class="home">
    <h1>图标功能页面</h1>
    <div class="icon-grid">
      <!-- Element Plus 图标示例 -->
      <div class="icon-item" v-for="icon in icons" :key="icon.name">
        <el-icon :size="icon.size" :color="icon.color">
          <component :is="icon.component" />
        </el-icon>
        <span class="icon-name">{{ icon.name }}</span>
      </div>
    </div>
    
    <!-- 图标操作面板 -->
    <div class="control-panel">
      <el-button type="primary" @click="addIcon">添加图标</el-button>
      <el-button @click="resetIcons">重置</el-button>
    </div>
    
  </div>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
import * as ElementPlusIcons from '@element-plus/icons-vue'

const router = useRouter()

// 图标列表
const icons = ref([
  { name: 'Star', component: shallowRef(ElementPlusIcons.Star), size: 30, color: '#409EFF' },
  { name: 'Heart', component: shallowRef(ElementPlusIcons.Heart), size: 30, color: '#E6A23C' },
  { name: 'Check', component: shallowRef(ElementPlusIcons.Check), size: 30, color: '#67C23A' },
  { name: 'Close', component: shallowRef(ElementPlusIcons.Close), size: 30, color: '#F56C6C' },
  { name: 'Warning', component: shallowRef(ElementPlusIcons.Warning), size: 30, color: '#E6A23C' },
  { name: 'Info', component: shallowRef(ElementPlusIcons.InfoFilled), size: 30, color: '#909399' }
])

// 添加图标方法
const addIcon = () => {
  const iconNames = Object.keys(ElementPlusIcons)
  const randomIconName = iconNames[Math.floor(Math.random() * iconNames.length)]
  const colors = ['#409EFF', '#E6A23C', '#67C23A', '#F56C6C', '#909399']
  const randomColor = colors[Math.floor(Math.random() * colors.length)]
  
  icons.value.push({
    name: randomIconName,
    component: shallowRef(ElementPlusIcons[randomIconName]),
    size: 30,
    color: randomColor
  })
}

// 重置图标方法
const resetIcons = () => {
  icons.value = [
    { name: 'Star', component: shallowRef(ElementPlusIcons.Star), size: 30, color: '#409EFF' },
    { name: 'Heart', component: shallowRef(ElementPlusIcons.Heart), size: 30, color: '#E6A23C' },
    { name: 'Check', component: shallowRef(ElementPlusIcons.Check), size: 30, color: '#67C23A' },
    { name: 'Close', component: shallowRef(ElementPlusIcons.Close), size: 30, color: '#F56C6C' },
    { name: 'Warning', component: shallowRef(ElementPlusIcons.Warning), size: 30, color: '#E6A23C' },
    { name: 'Info', component: shallowRef(ElementPlusIcons.InfoFilled), size: 30, color: '#909399' }
  ]
}


</script>

<style scoped>
.home {
  padding-top: 80px;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  transition: all 0.3s;
}

.icon-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.icon-name {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}

.control-panel {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.navigation-panel {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>